<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8;" />
    <script src="./lib/jquery-1.7.2.min.js"></script>
    <script src="./lib/jquery-ui/js/jquery-ui-1.10.2.custom.min.js"></script>
    <script type="text/javascript" src="./lib/timeline/timeline-min.js"></script>
    <script src="./lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="./lib/interaction.js"></script>
    <script src="./lib/date-utils.min.js"></script>
    <script src="./lib/bootstrap/js/bootstrapSwitch.js"></script>

    <link rel="stylesheet" type="text/css" href="./lib/timeline/timeline.css">
    <link rel="stylesheet" type="text/css" href="./lib/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="./lib/jquery-ui/css/ui-lightness/jquery-ui-1.10.2.custom.min.css">
    <link rel="stylesheet" type="text/css" href="./lib/bootstrap/css/bootstrapSwitch.css">

    <style type="text/css">
    body {
        font: 10pt arial;
        background-color:grey;
        color:white;

    }

     div.timeline-axis-grid{
        z-index: 2;
     }
     div.timeline-axis-text {
        color:white;
    }

    div.timeline-event {
        border: none;
        background:none;
        border-radius: 0;
    }
    div.timeline-event-selected {
        border: none;
        background: none;
    }
    div.timeline-event-content {
        margin: 0;
    }
    div.timeline-event-range {
        border: none;
        border-radius: 0;
        height: 100px;
        width: 100%;
        position: relative;
        overflow: visible;
    }
    div.bar {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        text-align: center;
        color: white;
        z-index:1;
    
    }
    div.requirement {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        border-top: 2px solid gray;
        background: #e5e5e5;
        opacity: 0.5;
    }
    </style>


    <script type="text/javascript">
    var timeline;

    
        // draw the scheduler bar
        function drawVisualization(yourDate,evnNameArr) {

            // setup the background (transparent) bars
            var data = [];
            var d; 
            var maxNum = 20;
            if(yourDate===undefined){
               d = new Date(); 
              // console.log(d);
            }
            else{
                d=yourDate;
            }
            d.setHours(0);
            d.setMinutes(0);
            d.setSeconds(0);
            for (var i = 0; i < 24; i++) {


                var start = new Date(d);
                var end = new Date(d)
                end.setHours(end.getHours() + 1);
               // console.log(end);                
                var style={};
                if(evnNameArr===undefined){
                     style = 'height:' + '100' + 'px;' +
                             'background-color: ' + 'rgb(81, 163, 81)' + ';';
                }

                else{
                     var bgcolor={};
                     if(evnNameArr[i]=="0"){
                         bgcolor='rgb(81, 163, 81)';
                     }

                     if(evnNameArr[i]=="1"){
                         bgcolor='rgb(0, 68, 204)';
                     }

                     if(evnNameArr[i]=="2"){
                         bgcolor='rgb(248, 148, 6)';
                     }    

                     if(evnNameArr[i]=="3"){
                        bgcolor="rgb(235, 0, 255)";
                     }                 

                     style = 'height:' + '100' + 'px;' +
                             'background-color: ' + bgcolor + ';';
                }
             

                var actual = '<div class="bar on" oncontextmenu="return false;" style="' + style + '" ' +'>' + '</div>';
                var item = {
                    'group': '',
                    'start': start,
                    'end': end,            
                    'content': actual
                };
                data.push(item);

                d = new Date(end);
            }

            // specify options
            var options = {
                "width":  "100%",
                "height": "100px",
                "style": "box",
                "eventMarginAxis":1,     
                "showCurrentTime":false,
                "zoomable":false,
                "moveable":false,
                "scale":links.Timeline.StepDate.SCALE.HOUR,
                "step":1

            };

            // Instantiate our timeline object.
            timeline = new links.Timeline(document.getElementById('mytimeline'));

            // Draw our timeline with the created data and options
            timeline.setAutoScale(false);
            
            timeline.draw(data, options);
        }


        </script>
    </head>

<body onload="drawVisualization();" >




<div id="spWidget" >
    <b>SP  </b>&nbsp;&nbsp;&nbsp;&nbsp;
    <input id="sp_on" name="sp_type" type="radio" value="on">&nbsp;&nbsp;ON</input>&nbsp;&nbsp;&nbsp;&nbsp;
    <input id="sp_off" name="sp_type" type="radio" value="off">&nbsp;&nbsp;OFF</input>
  </div>  

<div id="date_modifier" >
 
   <button id="leftArrow"  type="button"   ><</button>&nbsp;&nbsp;
   <button id="rightArrow" type="button"   >></button>
  
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<p>


<div id="mytimeline"></div>


</p>

<p>
<br>
<br>
<br>

<div id="events" class="row-fluid">
   <div id="offBtns" class="span5">
           
         <div class="switch" data-on="success" data-off="primary">
           <input type="checkbox" checked />
        </div>
    </div>
   
   <div id="tooltip" class="span3"></div>
   
   <div class="pageaction span4">
   
    <button type="button" id="cancel" class="btn btn-inverse" data-complete-text="Disabled !!!" >Disable</button>
    
    <a id="reset" href="#" class="btn btn-info">Reset</a>
    <a id="save" href="#" class="btn btn-success">Save</a>


   </div>


   

</div>

</p>





</body>
</html>
